<script src="http://static.scripting.com/github/bootstrap2/js/jquery.js"></script>
<script src="http://static.scripting.com/github/bootstrap2/js/bootstrap-transition.js"></script>
<script src="http://static.scripting.com/github/bootstrap2/js/bootstrap-modal.js"></script>

<div id="windowTitleDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
	<div class="modal-header">
		<a href="#" class="close" data-dismiss="modal">&times;</a>
		<h2 style="margin: 0px">Upload result:</h2>
	</div>
	<div class="modal-body">
		<div class="alert alert-success" id="successMsg" style="display: none;">...</div>
		<div class="alert alert-info" id="infoMsg" style="display: none;">...</div>
		<div class="alert alert-warning" id="warningMsg" style="display: none;">...</div>
		<div class="alert alert-danger" id="dangerMsg" style="display: none;">...</div>	
		<div class="divDialogElements">
		<pre id="uploadResult">
		
		</pre>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" onclick="$('#windowTitleDialog').modal('hide')">OK</button>
	</div>
</div>

<form action="upload" method="post" enctype="multipart/form-data" id="uploadForm">
	%MOTES_TXT%

	<div class="form">
	  <p>Compile as: <select name="language" %DISABLED% >
          <option value="c" %CCODE_SELECTED% >MansOS C</option>
          <option value="plain_c" %PLAINCODE_SELECTED% >Plain C</option>
          <option value="nesc" %NESCCODE_SELECTED% >TinyOS nesC</option>
          <option value="contiki_c" %CONTIKICODE_SELECTED% >Contiki C</optio>
          <option value="seal" %SEALCODE_SELECTED% >SEAL</option>
          </select></p>

	  <label for="code">Enter code:</label><br/>
	  <textarea id="code" name="code" style="font-family: monospace; width: 80%" rows="20" title="Enter the C/SEAL code your would normally put in application's main file" %DISABLED%>%UPLOAD_CODE%</textarea><br/>
	
	  <label for="config">Enter configuration options (one per line) or TinyOS configuration code:</label><br/>
	  <textarea id="config" name="config" style="font-family: monospace; width: 80%" rows="4"  title="Enter the configuration options your would normally put in application's config file" %DISABLED%>%UPLOAD_CONFIG%</textarea><br/>
	
	  <input type="hidden" name="sma" class="Msma37" value="0">
	  <input type="button" name="compile" value="Compile and upload" class="submit_btn" %DISABLED%/> 
	  <!-- <input type="checkbox" name="slow" title="Add delays to the upload script. Useful if serial protocol is tunneled over IP" %SLOW_CHECKED% %DISABLED%>Use SLOW switch when uploading<br/><br/> -->
	</div>

  <label for="file">Alternatively, specify IHex filename: </label><br/>
  <input type="file" name="file" id="file" value="%UPLOAD_FILENAME%" title="Input a pre-compiled Intel HEX file" %DISABLED%/><br/><br/>

  <input type="button" name="upload" value="Upload" class="submit_btn" %DISABLED%/> 
  <!-- <input type="checkbox" name="slow" title="Add delays to the upload script. Useful if serial protocol is tunneled over IP" %SLOW_CHECKED% %DISABLED%>Use SLOW switch when uploading<br/><br/> -->
</div></form>

<script language="javascript">
	var line = 1;
	var data = "";

	$(function() {
		$(".submit_btn").click(function() {
			var fd = new FormData();
			
			fd.append($(this).attr('name'), $(this).val());
			var inputElements = $('body').find(':input');
			inputElements.each(function(index, para) {
				if (!$(this).is("textarea")) {
					if ($(para).attr("type") == 'radio' || $(para).attr("type") == 'checkbox') {
						if ($(para).attr("checked") == 'checked') {
							fd.append($(para).attr('name'), $(para).val());
						}
					} else if ($(para).attr('name') != undefined && $(para).attr('name') != 'file' && $(para).attr('type') != 'button') {
	    				fd.append($(para).attr('name'), $(para).val());
	    			}
	    		}
			});
			var txtElements = $('textarea');
			txtElements.each(function(index, para) {
  				fd.append($(para).attr('name'), $(para).val());
			});
			if ($("#file")[0].files[0] != undefined) {
				fd.append("file", $("#file")[0].files[0]);
			}
			
			$('#successMsg').hide();
			$('#warningMsg').hide();
			$('#dangerMsg').hide();
			$.ajax({
			  url: 'upload',
			  data: fd,
			  processData: false,
			  contentType: false,
			  type: 'POST',
			  success: function(data) {
				if (data == "Upload done!") {
					$('#successMsg').show();
					$('#successMsg').text(data);
				} else if (data == "Upload failed!") {
					$('#dangerMsg').show();
					$('#dangerMsg').text(data);
				} else {
					$('#warningMsg').show();
					$('#warningMsg').text(data);
				}
			  },
			  error: function() {
            	alert('Error occured');
       		  }
			});		
			updateUploadPage();
			return false;
		});
	});

	function endsWith(str, suffix) {
	    return str.indexOf(suffix, str.length - suffix.length) !== -1;
	}

	function updateUploadPage() {
		data = "";
		$('#uploadResult').text("");
		$("#windowTitleDialog").modal('show');
		line = 1;
		processUpload();
	}
		
	function processUpload() {
		if (line != 0) {
			$('#uploadResult').text("");
			$('#uploadResult').text(data);
			if (!endsWith(data, "Finished!")) {
				currentLine = line;
				line = 0;
				refreshUploadPage(currentLine);
			} else {
				line = -1;
			}
		}	
		if (line != -1) {
			setTimeout(processUpload, 1);
		}
	}
	
	function refreshUploadPage(currentLine) {
		$.ajax({
			type: "GET",
			url: "upload-result",
			data: "line=" + currentLine,
			dataType: "text",
			success: function(d) {
				data = d;
				line = currentLine + 1;
			},
			error: function() {
        		alert('Error occured');
   			}
		});
	}
</script>
